<template>
	<view class="service">
		<navbar></navbar>
		<textNavbar myprops="客服中心"></textNavbar>
		<view class="service-top">
			<view class="service-top-left">
				<view class="service-top-left-top">
					<image src="../../../static/消息@1x.png" mode=""></image>
				</view>
					<text>在线客服</text>
					<text class="text2">周一 ~ 周日 09:00~18:00</text>
			</view>
			<view class="service-top-right">
				<view class="service-top-right-top">
					<image src="../../../static/电话键盘_填充@1x.png" mode=""></image>
				</view>
					<text>客服电话</text>
					<text class="text2">周一 ~ 周五 10:00~18:00</text>
			</view>
		</view>
		<view class="service-content">
			<view class="service-content-top">
				<text>热门问题</text>
			</view>
			<view>
				<van-cell-group>
				  <van-cell title="文件无法下载" is-link v-for="item in 15" />
				</van-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.service-top {
		width: 100vw;
		height: 18vh;
		background: #EDEDED;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.service-top-left-top  {
		width: 100rpx;
		height: 100rpx;
		border-radius: 6px;
		background: #2CB856;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.service-top-left-top > image {
		width: 56rpx;
		height: 56rpx;
	}
	.service-top-left {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.text2 {
		color: #b1b1b3;
		font-size: 24rpx;
	}
	
	.service-top-right-top > image {
		width: 56rpx;
		height: 56rpx;
	}
	.service-top-right {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.service-top-right-top  {
		width: 100rpx;
		height: 100rpx;
		border-radius: 6px;
		background: linear-gradient(0deg, #46B3DC, #46B3DC), #FEB308;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.service-content {
		width: 100vw;
		height: calc(83vh - 18vh);
		background-color: yellow;
	}
	.service-content-top {
		height: 60rpx;
		background-color: #EDEDED;
		color: #b1b1b3;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}
	.service-content-top > text {
		margin-left: 20rpx;
	}
	
	
	
</style>
